<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body{
            perspective: 800px;
            background-color: green;
        }
        .box{
            border-radius: 20px;
            transform: translateZ(100px);
            position: absolute;
            width: 200px;
            height: 200px;
            border: 1px solid rgb(44, 115, 177);
            display: flex;
            justify-content:center;
            align-items:center
        }
        .box-1{
            width: 60px;
            height: 60px;
            border-radius: 50%;
            background-color: rgb(255, 255, 255);
            /* border: 4px solid black; */
        }
        .box2{
            border-radius: 20px;
            transform: translateZ(-100px);
            position: absolute;
            width: 200px;
            height: 200px;
            border: 1px solid rgb(44, 115, 177);
            display: flex;
            flex-direction: column;
            justify-content: space-around;
            align-items: center;
        }
        .box3{
            border-radius: 20px;
            transform: rotateY(90deg) translateZ(-100px);
            position: absolute;
            width: 200px;
            height: 200px;
            border: 1px solid rgb(44, 115, 177);
            display: flex;
            justify-content: space-around;
        }
        .box3>.box-1:nth-child(2){
            align-self: center;
        }
        .box3>.box-1:nth-child(3){
            align-self:flex-end;
        }
        .box4{
            border-radius: 20px;
            transform: rotateY(90deg) translateZ(100px);
            position: absolute;
            width: 200px;
            height: 200px;
            border: 1px solid rgb(44, 115, 177);
            display: flex;
            justify-content: space-around;
            
        }
        .box4-1{
            display: flex;
            flex-direction: column;
            /* align-content:space-between; */
            justify-content: space-around;
        }
        .box5{
            border-radius: 20px;
            transform: translateY(-100px) rotateX(90deg);
            position: absolute;
            width: 200px;
            height: 200px;
            border: 1px solid rgb(44, 115, 177);
            display: flex;
            justify-content: space-around;
        }
        .box5-1{
            display: flex;
            flex-direction: column;
            justify-content: space-between;
        }
        .box5-2{
            align-self: center;
        }
        .box6{
            transform: translateY(100px) rotateX(90deg);
            position: absolute;
            width: 200px;
            height: 200px;
            border-radius: 20px;
            border: 1px solid rgb(44, 115, 177);
            display: flex;
            justify-content: space-around;
            align-content: space-around;
            flex-wrap: wrap;
            flex-direction: column;
        }
        main {
            width: 200px;
            height: 200px;
            margin: 200px auto;
            position: relative;
            /* border: 10px solid red; */
            /* background-color: red; */
            transform-style: preserve-3d;
            transform: rotateX(30deg) rotateY(30deg); 
        }
        div{
            background-color: rgb(44, 115, 177);
        }
    </style>
</head>
<body>
    <main>
        <div class="box">
            <div class="box-1"></div>
        </div>
        <div class="box2">
            <div class="box-1"></div>
            <div class="box-1"></div>
        </div>
        <div class="box3">
            <div class="box-1"></div>
            <div class="box-1"></div>
            <div class="box-1"></div>
        </div>
        <div class="box4">
            <div class="box4-1">
                <div class="box-1"></div>
                <div class="box-1"></div>
            </div>
            <div class="box4-1">
                <div class="box-1"></div>
                <div class="box-1"></div>
            </div>
        </div>
        <div class="box5">
            <div class="box5-1">
                <div class="box-1"></div>
                <div class="box-1"></div>
            </div>
            <div class="box5-2">
                <div class="box-1"></div>
            </div>
            <div class="box5-1">
                <div class="box-1"></div>
                <div class="box-1"></div>
            </div>
        </div>
        <div class="box6">
            <div class="box-1"></div>
            <div class="box-1"></div>
            <div class="box-1"></div>
            <div class="box-1"></div>
            <div class="box-1"></div>
            <div class="box-1"></div>
        </div>
    </main>
</body>
</html>
<script>
    let downx, downy;
    let upx = 0, upy = 0;
    let mainDom = document.querySelector('main');   // 获取容器元素
    // 添加鼠标按下事件
    document.onmousedown = function (e) {
        e.preventDefault();
        // 记录鼠标按下时的位置
        downx = e.pageX;
        downy = e.pageY;
        document.onmousemove = mouseMove;
    }
    document.onmouseup = function (e) {
        // 记录鼠标抬起的位置 
        upx = upx + e.pageY - downy;
        upy = upy + e.pageX - downx;
        document.onmousemove = null;
    }
    function mouseMove(e) {
        mainDom.style.transform = `rotateX(${upx + e.pageY - downy}deg) rotateY(${upy + e.pageX - downx}deg)`;
    }
</script>